<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/test.css" type="text/css" media="all" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/init.js"></script>
<script type="text/javascript">  
	$(document).ready(function() {
		alert('${param.message}');
		
		$("#saveButton").live("click", function(){
			$("#modifyGlossaryForm").submit();
		});
		$("#saveButton").live("click", function(){
			$("#modifyEditForm").submit();
		});

		$("#showAddAttributeButton").live("click", function(){
			$("#addAttributeEditor").css("display", "");

		});
		$("#viewAttributeButton").live("click", function(){
			$("#viewAttributeForm").css("display", "");

		});
		$("#addAttributeButton").live("click", function(){
		 	var attributeName = $("#attributeName").val();
			$("<form id='addAttributeForm' action='${pageContext.request.contextPath}/glossary/attribute/create.do' method='post' style='display:none'><input name='glossaryTypeId' value='${glossaryType.id}'><input name='attributeName' value='" + attributeName + "'></form>").appendTo("body");
			
			$("#addAttributeForm").submit();

			

		});

	 
	});  
</script>
</head>
<body> 
<div id="list">
	<form id="modifyGlossaryForm" action="${pageContext.request.contextPath}/glossary/type/modify.do" method="post">
		<table name="list"> 
			<tr>
				<th>글로서리타입ID</th>
				<td>
					${glossaryType.id}
					<input name="glossaryTypeId" type="hidden" value="${glossaryType.id}"/>
				</td>
			</tr> 
			<tr>
				<th>글로서리타입명</th>
				<td><input name="glossaryTypeName" type="text" value="${glossaryType.name}"/></td>
			</tr> 
		</table>		
	</form>
	<br/>
	<a href="#" id="saveButton" class="button">save</a> /
	<a href="${pageContext.request.contextPath}/glossary/type/list.do" id="listButton" class="button">list</a>
	<br/>
	<div id="list"> 
		<table name="list">
			<thead>
				<tr>
					<th>속성ID</th>
					<th>속성명</th>  
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${glossaryType.attributes}" var="attribute" varStatus="row">
				<tr> 
					<td>${attribute.key}</td>
					<td>${attribute.value.name}</td> 
				</tr> 
				</c:forEach>
			</tbody>
		</table>
		<br/>
		<a href="#" id="showAddAttributeButton" class="button">add attribute</a>
		<br/>  
	</div>	
	<div id="addAttributeEditor" style="display:none;">  
		<table name="list">  
			<tr>
				<th>속성명</th>
				<td><input id="attributeName" name="attributeName" type="text"/></td>
			</tr> 
		</table>
		<a href="#" id="addAttributeButton" class="button">add</a>
		<a href="#" id="removeButton" class="button">cancel</a>
 	</div>	
	<div id="viewAttributeEditor" style="display:none;">  	
		<table name="list"> 
			<tr>
				<th>속성ID</th>
				<td></td>
			</tr> 
			<tr>
				<th>속성명</th>
				<td><input name="glossaryTypeName" type="text"/></td>
			</tr> 
		</table>
		<a href="#" id="editButton" class="button">save</a> /
		<a href="#" id="editButton" class="button">remove</a> /
		<a href="#" id="removeButton" class="button">cancel</a>		
	</div>
	<br/>

</div>
</body>
</html>